<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        width: 100%;
        height: 300px;
      }

      .left-pane {
        width: 30%;
        background-color: lightgray;
        padding: 10px;
      }

      .right-pane {
        flex: 1;
        background-color: lightblue;
        padding: 10px;
      }

      .separator {
        width: 5px;
        background-color: black;
        cursor: col-resize;
        position: absolute;
        height: 300px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="left-pane">
        <h2>Left Pane</h2>
        <p>This is the left pane content.</p>
      </div>
      <div class="separator" id="separator"></div>
      <div class="right-pane">
        <h2>Right Pane</h2>
        <p>This is the right pane content.</p>
      </div>
    </div>

    <script>
      const separator = document.getElementById("separator");
      const container = document.querySelector(".container");
      const leftPane = container.querySelector(".left-pane");
      const rightPane = container.querySelector(".right-pane");

      let isDragging = false;
      let startX;
      let startWidth;

      separator.addEventListener("mousedown", (e) => {
        isDragging = true;
        startX = e.clientX;
        startWidth = leftPane.offsetWidth;

        // 设置分隔条的初始位置为鼠标位置
        separator.style.left = e.clientX - container.offsetLeft + "px";
      });

      document.addEventListener("mousemove", (e) => {
        if (isDragging) {
          const diffX = e.clientX - startX;
          const newWidth = startWidth + diffX;

          if (newWidth >= 0 && newWidth <= container.offsetWidth - 5) {
            leftPane.style.width = newWidth + "px";
            rightPane.style.width = container.offsetWidth - newWidth - 5 + "px";

            // 实时更新分隔条的位置
            separator.style.left = e.clientX - container.offsetLeft + "px";
          }
        }
      });

      document.addEventListener("mouseup", () => {
        isDragging = false;
      });
    </script>
  </body>
</html>
